<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="850px"
    append-to-body
    :close-on-click-modal="false"
    @close="closeModal"
  >
    <el-form ref="form" :model="form" :show-message="false" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="药材名称" prop="name" required>
            <el-input
              v-model.trim="form.name"
              placeholder="请输入药材名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药材首字母" prop="firstLetter">
            <el-input
              v-model.trim="form.firstLetter"
              placeholder="不输入则自动生成首字母"
              clearable
              @blur="pinyinToggle"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药材类别" prop="categoryIds">
            <el-select
              v-model="form.categoryIds"
              placeholder="请选择药材类别"
              clearable
              filterable
              multiple
              collapse-tags
              style="width: 100%"
            >
              <el-option
                v-for="item in categoryOptions"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药材毒性" prop="toxicity">
            <el-radio-group v-model="form.toxicity">
              <el-radio :label="0">无毒</el-radio>
              <el-radio :label="1">有毒</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="药材简介" prop="note">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入药材简介"
              clearable
              v-model="form.note"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建议用量" prop="dosageAdvice">
            <div class="disFlxAC">
              <el-input
                v-model="form.dosageAdvice"
                placeholder="请输入药材建议用量"
                :maxLength="200"
                clearable
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最大用量" prop="doseMax">
            <div class="disFlxAC">
              <el-input-number
                :controls="false"
                :precision="0"
                :min="0"
                v-model="form.doseMax"
                placeholder="请输入药材最大用量"
                style="width: 100%"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药材图片" prop="materialsImg">
            <ImageUpload v-model="form.materialsImg" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药材性味" prop="materialsTrait">
            <el-input
              v-model="form.materialsTrait"
              placeholder="请输入药材性味"
              clearable
              type="textarea"
              :rows="3"
              :maxLength="200"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药材功能" prop="materialsEffect">
            <el-input
              v-model="form.materialsEffect"
              placeholder="请输入药材功能"
              clearable
              type="textarea"
              :rows="3"
              :maxLength="200"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="药材主治" prop="materialsIndicate">
            <el-input
              v-model="form.materialsIndicate"
              placeholder="请输入药材主治"
              clearable
              type="textarea"
              :rows="3"
              :maxLength="200"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药材经脉" prop="materialsMeridians">
            <el-input
              v-model="form.materialsMeridians"
              placeholder="请输入药材经脉"
              clearable
              type="textarea"
              :rows="3"
              :maxLength="200"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addDrug, updateDrug, getDrugDetails } from "@/api/saas/tcm.js";
import { titleToggle } from "@/utils/index";
import pinyin from "js-pinyin";
import ImageUpload from "@/components/ImageUpload";
import { deepClone } from '@/utils';

export default {
  components: {
    ImageUpload
  },
  props: {
    categoryOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: "新建药材",
      open: false,
      form: {
        id: undefined,
        name: "",
        firstLetter: "", // 首字母
        doseMax: undefined, // 最大用量
        toxicity: 0, // 有无毒性0无1有
        note: "", // 简介

        categoryIds: [],
        materialsImg: undefined,
        materialsTrait: "", // 性味
        materialsEffect: "", // 功能
        materialsIndicate: "", //主治
        materialsMeridians: "", //经脉
        dosageAdvice: "", //建议用量
      },
      rules: {
        name: [
          { required: true, message: "请输入药材名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    openModal(id) {
      this.title = id ? '编辑药材' : '新建药材';
      this.open = true;
      this.form.id = id || undefined;
      this.form.id && this.getData();
    },
    closeModal() {
      this.$refs["form"].resetFields();
      Object.assign(this.$data, this.$options.data()); // 存在自定义校验规则不能重置data
    },
    // 获取详情
    getData() {
      getDrugDetails(this.form.id).then((res) => {
        this.form = res.data;
        let ids = res.data.categoryIds ? res.data.categoryIds.split(",") : [];
        this.form.categoryIds = ids.map(v=> Number(v));
      });
    },
    pinyinToggle() {
      this.form.firstLetter = titleToggle(this.form.firstLetter);
    },
    /** 提交按钮 */
    submitForm() {
      const that = this;
      that.$refs["form"].validate(async (valid) => {
        if (valid) {
          const params = deepClone(that.form);
          params.categoryIds = params.categoryIds.join(",");

          if (!params.firstLetter) { // 未填写首字母,自动生成
            let str = pinyin.getCamelChars(params.name);
            params.firstLetter = titleToggle(str);
          }
          if (params.id) {
            await updateDrug(params);
          } else {
            await addDrug(params);
          }
          that.$message.success(params.id ? "修改成功" : "新增成功");
          that.$emit("refresh");
          that.closeModal();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
